<template>
	<view class="info-item" @click="goIndexInfo(infoData.infoId)">
		<view class="info-title">【{{infoData.infoType|get_infoType}}】<text class="title">{{infoData.infoTitle}}</text></view>
		<view class="content">
			{{infoData.infoComm}}
		</view>
		<view class="footer">
			<view class="tags">
				<block v-if="infoData.infoType==0">
					<view class="tag-item">{{infoData.infoSterilization|get_state('infoSterilization')}}</view>
					<view class="tag-item">{{infoData.infoVaccines|get_state('infoVaccines')}}</view>
					<view class="tag-item">{{infoData.infoDewo|get_state('infoDewo')}}</view>
				</block>
			</view>
			<view class="icons">
				<text class="icon-bdoy">
					<u-icon name="thumb-up" color="#000000" size="24"></u-icon>
					<text class="info">{{infoData.FabulousNum}}</text>
				</text>
				<text class="icon-bdoy">
					<u-icon name="chat" color="#000000" size="24"></u-icon>
					<text class="info">{{infoData.c_Num}}</text>
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			infoData: Object
		},
		data() {
			return {

			};
		},
		methods: {
			goIndexInfo(infoId) {
				this.$comm.navigateTo('/pages/index-info/index-info?infoId=' + infoId)
			}
		}
	}
</script>

<style lang="scss">
	.footer {
		margin-top: 14upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.icons {
			font-size: 24upx;

			.info {
				margin-left: 2upx;
			}

			.icon-bdoy:nth-child(2) {
				margin-left: 15upx;
			}
		}
	}

	.tag-item {
		background-color: $indexColor;
		color: #FFFFFF;
		padding: 8upx;
		display: inline-block;
		border-radius: 10upx;
		font-size: 24upx;
		margin-right: 20upx;
	}


	.info-item {
		background-color: rgb(238, 238, 238);
		border-radius: 10upx;
		height: 200upx;
		padding: 10upx 40upx;
		margin: 20upx 0upx;

		.content {
			line-height: 40upx;
			min-height: 80upx;
			text-indent: 2em;
			font-size: 20upx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
</style>
